<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>增删改查</title>
</head>
<body>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>
<script type="text/javascript">
    /**
     * document.createElement("标签名"):创建一个标签，并将创建的标签对象返回
     * parentElement.appendChild(ele):在指定的父元素中的最后面追加一个子元素
     * parentElement.insertBefore(newEle,targetEle):在指定的父元素中，将newEle添加到targetEle之前
     * parentElement.replaceChild(newEle, oldEle):在指定的父元素中，使用newEle替换oldEle
     * element.remove():将指定的元素删除
     */
        //创建一个li标签
    var li = document.createElement("li");//<li></li>
    //为li标签中的内容赋值
    li.innerText = "abc";
    //将li追加到ul中
    var ul = document.querySelector("ul");
    ul.appendChild(li);
    //创建一个li标签
    var li1 = document.createElement("li");//<li></li>
    //为li标签中的内容赋值
    li1.innerText = "xyz";
    //将li1添加到ul的第一个子标签的位置
    var firstLi = ul.firstElementChild;
    //ul.insertBefore(li1, firstLi);
    //将li1替换ul中的第一个标签
    ul.replaceChild(li1, firstLi);
    //将li1删除
    li1.remove();

</script>
</body>
</html>